<template>
	<view>
		<view class="cont" style="margin-bottom: 200upx;">
			<view class="pic">
				<view class="item-block" @tap="hit(list.id)">
					<image src="../../static/img/news/dianzan.png"></image>
					<text>点赞</text>
				</view>
				<view class="item-block" @click="pinglun(list.id)">    
					<image src="../../static/img/news/dianzan.png"></image>
					<text>评论</text>
				</view>
				<view class="item-block">
					<image src="../../static/img/news/shoucang.png"></image>
					<text>收藏</text>
				</view>
				<view class="item-block" @tap="jum()">
					<image src="../../static/img/news/dashang.png"></image>
					<text>打赏</text>
				</view>
				<view class="item-block">
					<image src="../../static/img/news/fenxiang1.png"></image>
					<text>分享</text>
				</view>
			</view>
			<view class="comment">
				<view class="dot"></view>
				<text>全部评论({{list.commentCount}})</text>
			</view>
			<view v-for="(item, index) in list.comment" :key="index" >
				<view style="padding-bottom: 50upx;">
					<view class="conten">
						<image :src="item.member_avatar" class="img"></image>
						<view class="names" @click="evaluate(list.id,item.id)">
							<p>{{ item.member_nickname }}</p>
							<p class="contents-evaluate">{{ item.content }}</p>
							<text>{{ item.create_time }}</text>
							<text>评论</text>
						</view>
						<image src="../../static/img/news/xin.png" mode="" class="xin" @click="support(item.comment_id,1)"></image>
						<text>{{ item.like_num }}</text>
					</view>
				</view>
				<view class="conten1" v-for="(child, indexss) in item.children" :key="indexss">
					<image :src="child.member_avatar" mode="" class="img"></image>
					<view class="name"  @click="evaluate(list.id,child.id)">
						<p>{{ child.member_nickname }}</p>
						<p class="contents-evaluate">{{ child.content }}</p>
						<text>{{ child.create_time }}</text>
						<text>回复</text>
					</view>
					<image src="../../static/img/news/xin.png" mode="" class="xin" @click="support(child.comment_id,1)"></image>
					<text>{{ child.like_num }}</text>
				</view>
			</view>
		</view>
		<view class="add">
			<input type="text" placeholder="留下你的评论" v-model="content"/>   
			<text @tap="send()">发送</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["list"],
		data() {
			return {
				member_id:1,
				news_id:'',
				comment_id:'',
				content:''
			}
		},
		methods: {
			support: function(comment_id, member_id) {
				console.log(JSON.stringify(this.commentList));
				let authData = uni.getStorageSync('authData');
				if (authData.auth) {
					uni.request({
						url: "http://yijiazhihui.40b876.cn/news/givegood",
						dataType: "json",
						data: {
							comment_id: 6,
							// member_id: 1,
						},
						header: {
							Authorization: authData.auth
						},
						success: (res) => {
							switch (res.data.code) {
								case '10000':
									uni.showToast({
										title: '点赞成功',
										duration: 2000
									});
							}
						}
					})
				}else{
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					});
				}
			},
			evaluate:function(newsId,comment_id){
				this.news_id=newsId;
				this.comment_id=comment_id;
				console.log(newsId+','+comment_id);  
				  
			},
			hit:function(newsId){
				console.log(newsId);  
			},
			jum:function(){
				uni.navigateTo({
					url:'../../pages/news/payTour'
				})
			},
			pinglun:function(newsId){  
				this.news_id=newsId;
			},
			send:function() {
				uni.showLoading({
				    title: '评论中...'
				});
				console.log(this.news_id);
				console.log(this.member_id);
				console.log(this.comment_id);
				console.log(this.content);
				uni.request({
					url:"http://yijiazhihui.40b876.cn/news/csave",
					dataType:"json",
					data:{
						type:0,
						news_id:this.news_id,
						member_id:this.member_id,
						comment_id:this.comment_id,
						content:this.content,
						type:0
					},
					success:(res)=>{   
						uni.showToast({
						    title: '评论成功',
						    duration: 2000
						});
					},
					complete:(over)=>{
						complete:(over)=>{
							uni.hideLoading();
						}
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.cont {
		.comment {
			display: inline-flex;
			font-size: 32upx;
			height: 65upx;
			line-height: 65upx;
			padding-top: 60upx;

			.dot {
				width: 6upx;
				height: 32upx;
				background: rgba(238, 15, 36, 1);
				border-radius: 3px;
				position: relative;
				margin-right: 10upx;
				top: 18upx;
			}
		}

		.conten {
			width: 690upx;
			display: inline-flex;

			image {
				width: 90upx;
				height: 90upx;
				position: relative;
				margin-right: 10upx;
				top: 0upx;
				border-radius: 45upx;
			}

			.xin {
				width: 62upx;
				height: 56upx;
				position: relative;
				top: 0upx;
			}

			.names {
				width: 490upx;

				p:first-child {
					font-size: 28upx;
				}

				p:last-child {
					font-size: 15upx;
					padding-bottom: 90upx;
				}

				text {
					font-size: 28upx;
					color: #989898;
				}
			}
		}

		.conten1 {
			width: 590upx;
			display: inline-flex;
			padding-left: 100upx;

			image {
				width: 60upx;
				height: 60upx;
				position: relative;
				margin-right: 10upx;
				top: 0upx;
				border-radius: 30upx;
			}

			.xin {
				width: 62upx;
				height: 56upx;
			}

			.name {
				width: 420upx;

				p:first-child {
					font-size: 28upx;
				}

				p:last-child {
					font-size: 15upx; 
					padding-bottom: 20upx;
				}

				text {
					font-size: 28upx;
					color: #989898;
				}
			}
		}
	}
	.add {
		width:100%;
		height:100upx;
		background:#FAEBD7;
		position: fixed;
		left:0;
		bottom:0;
		display: flex;
		flex-direction: row;
		align-items: center;

		input {
			-webkit-flex: 1;
			flex: 1;
			margin-left:30upx;
			font-size:30upx;
			border-bottom: 1px solid #BBBBBB;
		}
		text {
			width:50px;
			font-size:46upx;
			color:#F0AD4E;
			text-align: right;
			margin-right:30upx;
		}
	}
	.contents-evaluate{
		font-size:25upx;
	}
	.pic {
		width: auto;
		display: flex;
		flex-direction:row;
		justify-content: flex-end;
		margin-right:15px;
		align-items: center; 
		font-size: 24upx;
		color: #989898;
		.item-block{
			display:flex;
			flex-direction: column;
			width:85upx;
			image {
				width: 50upx;
				height: 50upx;
			}
			text {
				color: #999999;
				font-size: 24upx;
			}
		}
	}
</style>
